<template>
    <p class="ball">
        <span class="line1"></span>
        <span class="line2"></span>
        <span class="line3"></span>
        <span class="line4"></span>
        <span class="line5"></span>
    </p>
</template>

<script>
export default {
    name: "color-ball",
};
</script>

<style lang="less" scoped>
.ball {
    width: 50px;
    height: 50px;
    transform-style: preserve-3d;
    animation: rotate3d 1s linear infinite;
    -o-animation: rotate3d 1s linear infinite;
    -moz-animation: rotate3d 1s linear infinite;
    -webkit-animation: rotate3d 1s linear infinite;
    -ms-zoom-animation: rotate3d 1s linear infinite;

    span {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .line1 {
        background-color: rgba(255, 247, 211, 0.8);
        transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }

    .line2 {
        background-color: rgb(241, 111, 99);
        transform: rotateY(36deg);
        -o-transform: rotateY(36deg);
        -moz-transform: rotateY(36deg);
        -webkit-transform: rotateY(36deg);
    }

    .line3 {
        background-color: rgb(245, 195, 79);
        transform: rotateY(72deg);
        -o-transform: rotateY(72deg);
        -moz-transform: rotateY(72deg);
        -webkit-transform: rotateY(72deg);
    }

    .line4 {
        background-color: rgb(69, 163, 245);
        transform: rotateY(108deg);
        -o-transform: rotateY(108deg);
        -moz-transform: rotateY(108deg);
        -webkit-transform: rotateY(108deg);
    }

    .line5 {
        background-color: rgb(210, 117, 233);
        transform: rotateY(144deg);
        -o-transform: rotateY(144deg);
        -moz-transform: rotateY(144deg);
        -webkit-transform: rotateY(144deg);
    }

    @media (max-width: 768px) {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@keyframes rotate3d {
    0% {
        -webkit-transform: rotateZ(-30deg) rotateY(0deg);
        -moz-transform: rotateZ(-30deg) rotateY(0deg);
        -ms-transform: rotateZ(-30deg) rotateY(0deg);
        -o-transform: rotateZ(-30deg) rotateY(0deg);
        transform: rotateZ(-30deg) rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateZ(-30deg) rotateY(360deg);
        -moz-transform: rotateZ(-30deg) rotateY(360deg);
        -ms-transform: rotateZ(-30deg) rotateY(360deg);
        -o-transform: rotateZ(-30deg) rotateY(360deg);
        transform: rotateZ(-30deg) rotateY(360deg);
    }
}
</style>